<template>
    <div>
        <div class="qrcode">
            <div id="qroode2" class="qrconde" ref="qrCodeDiv"></div>
            <p style="margin-top: 30px; margin-bottom: 40px">{{url}}</p>
        </div>
    </div>
</template>

<script>
import QRcode from "qrcodejs2"
import html2canvas from "html2canvas"
import $ from 'jquery'
export default ({
    data() {
        return {
            currentIndex: 0,
            url: ''
        }
    },
    props: ['qid'],
    mounted() {
        this.initData();
    },
    methods: {
        initData(){
            $(".qrconde").html("");
            let qid = this.qid*1234;
            var encode_str=this.$UrlEncode.encode(JSON.stringify(qid));
            this.url='http://localhost:8080/final?qid='+encode_str;
            new QRcode(this.$refs.qrCodeDiv,{
                text:this.url,
                //text为转换为二维码的文本，可以是所有东西：图片、文本、电话、链接等等
                width:200,     //生成二维码的宽度
                height:200,     //生成二维码的高度
                colorDark:'#333333',   // 二维码颜色
                colorLight:'#fff',  //二维码背景颜色
                // correctLevel:QRCode.correctLevel.L,   //容错率 ，L/M/H
            })
            html2canvas(this.$refs.qrCodeDiv, {
                backgroundColor: null,
                width:300,
                height:300
            }).then(canvas => {
                var imgData = canvas.toDataURL('image/jpeg')  //这里转为图片方式 `[base64转图片并显示](https://blog.csdn.net/weixin_45527702/article/details/117324946)`
                this.imgData = imgData   //this.imgData是需要自己在data中定义，进而来接参
            })
        }
    },
    watch: {
        qid() {
            this.initData();
        }
    }
})
</script>

<style scoped>
.qrcode {
    text-align: center;
}
.qrconde {
    margin-left: 80px
}
</style>
